<template>
	<div id="sys_params">
		<main-head><i id="head" class="iconfont icontixian"></i>商家提现审核</main-head>

		<main-content>
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="创建日期">
					<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" @change="dateSearch()" clearable>
					</el-date-picker>
				</el-form-item>
				<el-button type="primary" @click="search()"><i class="iconfont iconsousuo"></i>搜索</el-button>
			</el-form>

			<el-table :data="list" stripe style="width: 100%" v-loading="load">
				<el-table-column prop="merchantId" label="商家id" align="center"></el-table-column>
				<el-table-column prop="nick" label="微信昵称" align="center"></el-table-column>
				<el-table-column prop="avatar" label="头像" align="center" width="200">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px; border-radius: 50%" :src="scope.row.avatar"
							:preview-src-list="scope.row.avatar.split(',')">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="money" label="提现金额" align="center">
					<template slot-scope="scope">
						{{scope.row.money}}元
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<span v-html="getAuditStatus(scope.row.status)"></span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center">
					<template slot-scope="scope">
						<span>{{
						  $moment(scope.row.createTime).format("Y-MM-DD HH:mm"),
						}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="primary" @click="openDialog(scope.row.id)" size="mini">
							<i class="iconfont iconxiangqing-"></i>审核
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination class="page" background :layout="
          $store.state.isPhone
            ? 'total, prev, pager, next'
            : 'total, sizes, prev, pager, next, jumper'
        " :current-page.sync="params.pageNo" :page-size.sync="params.pageSize" :total="total" @size-change="search"
				@current-change="getList">
			</el-pagination>
		</main-content>
		
		<!-- 审核弹框 -->
		<el-dialog title="审核" :visible.sync="dialog" width="30%" v-if="form.apply">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="微信昵称">
					{{form.nick}}
				</el-descriptions-item>
				<el-descriptions-item label="微信头像">
					<el-image style="width: 100px; height: 100px; border-radius: 50%" :src="form.avatar" v-if="form">
					</el-image>
				</el-descriptions-item>
				<el-descriptions-item label="申请提现金额">
					<span v-if="form.apply">{{form.apply.money}}元</span>
				</el-descriptions-item>
				<el-descriptions-item label="剩余余额">
					<span v-if="form.apply" style="color: green">{{form.balance}}元</span>
				</el-descriptions-item>
				<el-descriptions-item label="开户行">
					<span v-if="form.card">{{form.card.bankName}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="持卡人姓名">
					<span v-if="form.card">{{form.card.cardName}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="卡号">
					<span v-if="form.card">{{form.card.cardNum}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="审核状态" v-if="form.apply.status">
					<span v-if="form.apply" v-html="getAuditStatus(form.apply.status)"></span>
				</el-descriptions-item>
				<el-descriptions-item label="拒绝原因" v-if="form.apply.status==-1">
					<span v-if="form.apply" style="color: red;">{{form.apply.refuseReason}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="审核时间">
					<span v-if="form.apply">{{ $moment(form.apply.auditTime).format("Y-MM-DD HH:mm")}}</span>
				</el-descriptions-item>
			</el-descriptions>
			<div slot="footer" class="dialog-footer" center v-if="form.apply.status==0">
				<el-popconfirm confirm-button-text='好的' cancel-button-text='一会再说' icon="el-icon-info" icon-color="red"
					title="请认真核对商家银行卡信息,确认打款后再同意" @confirm="yes()">
					<el-button type="primary" slot="reference">同意</el-button>
				</el-popconfirm>
				<el-button type="danger" @click="refusedDialog=true">拒绝</el-button>
			</div>
		</el-dialog>
		<!-- 拒绝弹框 -->
		<el-dialog title="审核" :visible.sync="refusedDialog" width="30%">
			<el-form :rules="rule" :model="auditForm" ref="audit">
				<el-form-item label="拒绝原因" prop="refuseReason">
					<el-input v-model="auditForm.refuseReason" placeholder="请输入拒绝原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="no()">确定</el-button>
				<el-button type="info" @click="refusedDialog = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import editor from '@/components/utils/CustomWangEditor';
	import upload from '@/components/utils/Upload';

	export default {
		components: {
			editor,
			upload
		},
		data() {
			return {
				auditForm: {},
				refusedDialog: false,
				form: {},
				dialog: false,
				date: "",
				list: [],
				load: false,
				params: {
					name: "",
					pageSize: 10,
					pageNo: 1,
					isCount: true,
					startTime: "",
					endTime: "",
					id: "",
				},
				total: 0,
				rule: {
					refuseReason: {
						message: "请输入拒绝原因",
						required: true
					},
				}
			};
		},

		mounted() {
			this.search();
		},
		
		filters:{
			fixMoney(money){
				return Number(money).toFixed(2)
			}
		},

		methods: {
			yes() {
				this.auditForm.status = 1
				this.audit()
				this.dialog = false
			},
				
			fn(e){
				console.log(e);
			},
			no() {
				this.$refs["audit"].validate((valid) => {
					if (valid) {
						this.auditForm.status = -1
						this.audit()
						this.dialog = false,
							this.refusedDialog = false
					}
				})
			},

			audit() {
				this.$request.post({
					url: "admin/merchantManage/audit",
					params: this.auditForm,
					success: (result) => {
						this.$message.success("操作成功");
						this.auditForm = {}
						this.getList()
					},
				});
			},
			search() {
				this.params.pageNo = 1;
				this.params.isCount = true;
				this.getList();
			},

			getList() {
				this.load = true;
				this.$request.post({
					url: "admin/merchantManage/auditList",
					params: this.params,
					success: (result) => {
						if (this.params.isCount) {
							this.total = result.total;
						}
						this.params.isCount = false;
						this.list = result.list;
					},
					finally: () => {
						this.load = false;
					},
				});
			},

			//时间改变
			dateSearch() {
				if (this.date != null) {
					this.params.startTime = this.$moment(this.date[0]).format(
						"Y-MM-DD " + "23:59:59"
					);
					this.params.endTime = this.$moment(this.date[1]).format(
						"Y-MM-DD " + "23:59:59"
					);
				} else {
					this.params.startTime = ""
					this.params.endTime = ""
				}
				this.search();
			},

			cleanDialog() {
				this.form = {};
			},
			openDialog(id) {
				this.cleanDialog();
				//详细信息
				this.$request.post({
					url: "admin/merchantManage/auditDetail",
					params: {
						id
					},
					success: (result) => {
						this.form = result
						this.form.apply = result.apply
						this.auditForm.id = this.form.apply.id
						this.dialog = true;
					},
				});
			},
			getAuditStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #3c86ef'>审核中</font>"
					case 1:
						return "<font style='color: #76c379'>已通过</font>"
					case -1:
						return "<font style='color: red'>已拒绝</font>"
				}
			}
		},
	};
</script>

<style>
</style>

<style scoped>
	.page {
		text-align: right;
		margin-top: 20px;
	}

	#head {

		font-size: 30px;
	}

	.img {
		width: 20%;
		height: 15%;
		border-radius: 10%;
		margin-left: 10px;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
		-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 3px 3px 3px rgba(81, 81, 81, 0.5);
	}

	.iconfont {
		font-size: 10px;
		margin-right: 3px;
	}
</style>
